<template>
    <div id="app">
        <van-notice-bar
                v-if="isShowKrc"
                class="notice"
                color="#1989fa"
                background="#ecf9ff"
                left-icon="column"
        >
            {{krc ? krc : '暂无歌词'}}
        </van-notice-bar>
        <router-view class="page-content" :class="{'scale': scale}" :style="isShowKrc ? 'margin-top: 40px;' : ''"/>
        <play-state v-if="false"></play-state>
        <tab-bar :music-name="getMusicName" @showLyric="showLyric" @scaleContent="scaleContent"></tab-bar>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Music from "./components/Music";
    import PlayState from "./components/PlayState";
    import TabBar from "./components/TabBar";

    export default {
        data() {
            return {
                audio: {},
                krc: '',
                isShowKrc: false,
                scale: false
            }
        },
        components: {
            PlayState,
            TabBar
        },
        methods: {
            showLyric(state) {
                this.isShowKrc = state;
            },
            scaleContent(status) {
                this.scale = status;
            }
        },
        computed: {
            ...mapState({
                musicList: 'musicList',
                musicPlayer: 'musicPlayer',
                currentKrc: 'currentKrc'
            }),
            getMusicName() {
                return this.musicPlayer && this.musicPlayer.audio.name ? this.musicPlayer.audio.name : '暂无播放曲目';
            }
        },
        // watch: {
        //     musicPlayer: {
        //         deep: true,
        //         handler(val) {
        //             this.currentKrc = val && val.lyric.length ? val.lyric : [];
        //         }
        //     }
        // },
        mounted() {
            const music = new Music();
            this.$store.commit('initMusicPlayer', music);

            music.dom.ontimeupdate = () => {
                this.musicPlayer.currentTime = music.dom.currentTime;
                if (!this.currentKrc.length) {
                    this.krc = '歌词加载中...';
                    return;
                }
                for (let i = 0, len = this.currentKrc.length; i < len; i++) {
                    if (i + 1 >= len) break;
                    if (music.dom.currentTime >= this.currentKrc[i].timestamp
                        && music.dom.currentTime <= this.currentKrc[i + 1].timestamp) {
                        this.krc = this.currentKrc[i].content;
                        break;
                    }
                }
            }
        }
    }
</script>

<style lang="less">
    @import "//at.alicdn.com/t/font_1640469_rccr7d6vkke.css";

    #app {
        font-family: 'PingFangSC-Regular,PingFang SC';
        overflow: hidden;
        background-color: #e0e0e0;
        .notice {
            position: fixed;
            width: 100vw;
            top: 0;
            z-index: 99;
        }
        .page-content {
            transition: all 0.35s;
        }
        .scale {
            margin: 20px;
            box-sizing: border-box;
            width: calc(100vw - 40px);
            height: calc(100vh - 40px);
            border-radius: 10px;
            overflow: hidden;
            .van-nav-bar {
                background-color: #e0e0e0;
            }
            .van-cell {
                background-color: #e0e0e0;
            }
        }
    }
</style>
